/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Form, Input, Button, Select } from 'antd';
import JsLiveCode from '../reactcode/JsLiveCode';
import DesignUtil from '../common/DesignUtil';
import DesignContext from '../designContext';

const EventScriptEdit = forwardRef((props, ref) => {
  const { hideAction, eventScript } = props;
  const [eventScript2, setEventScript2] = useState(eventScript);
  const { controls } = useContext(DesignContext);

  useImperativeHandle(ref, () => ({
    setEventScript2,
    eventScript2,
  }));

  useEffect(() => {
    eventScript2.editTime = DesignUtil.formatDate(new Date());
  }, []);

  const refreash = () => {
    setEventScript2({ ...eventScript2 });
    Object.assign(eventScript, eventScript2);
  };

  useEffect(() => {
    eventScript.editTime = DesignUtil.formatDate(new Date());
    setEventScript2({ ...eventScript });
  }, [eventScript]);

  return (
    <>
      <Form layout="inline">
        <Form.Item label="场景" style={{ width: '45%' }}>
          <Input
            placeholder="输入场景"
            value={eventScript2.name}
            onChange={(event) => {
              eventScript2.name = event.target.value;
              refreash();
            }}
          />
        </Form.Item>
        <Form.Item
          label="动作"
          hidden={hideAction == null || hideAction === 'false' ? false : hideAction}
          style={{ width: '45%' }}
        >
          <Select
            value={eventScript2.action}
            onChange={(e) => {
              eventScript2.action = e;
              refreash();
            }}
          >
            <Select.Option value="new">新建</Select.Option>
            <Select.Option value="edit">编辑</Select.Option>
            <Select.Option value="delete">删除</Select.Option>
            {controls.map((c, index) => {
              const index2 = index;
              if (c.data.type === 'button') {
                return (
                  <Select.Option key={`${c.data.title}_${index2}`} value={c.data.title}>
                    {c.data.title}
                  </Select.Option>
                );
              } else {
                return <React.Fragment key={index2} />;
              }
            })}
          </Select>
        </Form.Item>
        <Form.Item label="触发" style={{ width: '45%' }}>
          <Select
            defaultValue="none"
            value={eventScript2.time}
            onChange={(e) => {
              eventScript2.time = e;
              refreash();
            }}
          >
            <Select.Option value="none">不触发</Select.Option>
            <Select.Option value="before">表单处理前</Select.Option>
            <Select.Option value="after">表单处理后</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="描述" style={{ width: '45%' }}>
          <Input.TextArea
            placeholder="输入场景的描述内容"
            value={eventScript2.description}
            rows={2}
            onChange={(event) => {
              eventScript2.description = event.target.value;
              refreash();
            }}
          />
        </Form.Item>
        <Form.Item style={{ width: '100%' }}>
          <Button
            type="link"
            onClick={() => {
              eventScript2.scripts = [{ condition: '', script: '' }, ...eventScript2.scripts];
              refreash();
            }}
          >
            添加事件规则
          </Button>
        </Form.Item>
        {eventScript2.scripts?.map((script, index) => {
          const indexKey = index;
          return (
            <div key={indexKey} style={{ width: '100%' }}>
              <Form.Item label="条件表达式" style={{ width: '100%' }}>
                <Input
                  style={{ width: '80%' }}
                  placeholder="此处输入条件表达式"
                  value={script.condition}
                  onChange={(event) => {
                    eventScript2.scripts[index].condition = event.target.value;
                    refreash();
                  }}
                />
                <Button
                  type="link"
                  onClick={() => {
                    eventScript2.scripts.splice(index, 1);
                    refreash();
                  }}
                >
                  删除
                </Button>
              </Form.Item>
              <Form.Item label="执行表达式" style={{ width: '100%' }}>
                <JsLiveCode
                  id={`event${indexKey}`}
                  onChange={(event) => {
                    eventScript2.scripts[index].script = event;
                    refreash();
                  }}
                  code={script.script}
                />
                {/* <Input.TextArea
                  placeholder="此处输入执行表达式"
                  rows={10}
                  value={script.script}
                  onChange={(event) => {
                    eventScript.scripts[index].script = event.target.value;
                    refreash();
                  }}
                /> */}
              </Form.Item>
            </div>
          );
        })}
      </Form>
    </>
  );
});

export default EventScriptEdit;
